<template>
  <div>
    <el-container>
      <el-header height="120px">
        <miao-sha-header></miao-sha-header>
      </el-header>
      <el-main>
        <el-table :data="tableData" highlight-current-row border stripe>
          <el-table-column prop="goods.name" label="商品名称" width="180"></el-table-column>
          <el-table-column prop="goods.image" label="商品图片" width="180">
            <template slot-scope="scope"><el-image :src="getSrcUrl(scope.row.goods.image)" width="60" height="80"></el-image></template>
          </el-table-column>
          <el-table-column width="180" prop="goods.price" label="商品原价(元)"></el-table-column>
          <el-table-column width="180" prop="price" label="秒杀价(元)"></el-table-column>
          <el-table-column width="180" prop="stock" label="库存数量"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="handleViewDetail(scope.row.id)" type="text" size="small">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer>
        <miao-sha-footer></miao-sha-footer>
      </el-footer>
    </el-container>
  </div>
</template>

<script>

import MiaoShaHeader from "./Header"
import MiaoShaFooter from "./Footer"
import sysConfig from "@/config/sys";

export default {
  name: "Main",
  data() {
    return {
      tableData: []
    }
  },
  components: {
    MiaoShaHeader,
    MiaoShaFooter
  },
  mounted() {
    this.getMiaoShaGoods();
  },
  methods: {
    getSrcUrl(image) {
      return sysConfig.backUrl + 'image/' + image
    },
    getMiaoShaGoods() {
      this.$axios.get("miaoShaGoods/findAll")
        .then(response => {
          this.tableData = response.data.data;
        })
        .catch(error => {
          alert(error + "-请联系管理员");
        })
    },
    handleViewDetail(id) {
      // this.$router.push({name: "Detail", params: {id: id}})
      this.$router.push("Detail/" + id)
    }
  }
}
</script>

<style scoped>

</style>
